<template>
  <div class="sidebar-container">
    <el-scrollbar>
      <div class="logo-container">
        <img src="/images/beer-logo.svg" alt="Logo" class="logo-img" />
        <div class="logo-title">哈喽啤鲜生</div>
      </div>
      
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        :collapse="isCollapse"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
      >
        <el-menu-item index="/admin/dashboard">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        
        <el-menu-item index="/pos">
          <el-icon><ShoppingCart /></el-icon>
          <span>收银系统</span>
        </el-menu-item>
        
        <el-menu-item index="/products">
          <el-icon><Box /></el-icon>
          <span>商品管理</span>
        </el-menu-item>
        
        <el-menu-item index="/orders">
          <el-icon><Document /></el-icon>
          <span>订单管理</span>
        </el-menu-item>
        
        <el-menu-item index="/shifts">
          <el-icon><TrendCharts /></el-icon>
          <span>日报管理</span>
        </el-menu-item>
        
        <el-menu-item index="/admin/settings">
          <el-icon><setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
        
        <el-menu-item index="/admin/migrations">
          <el-icon><connection /></el-icon>
          <span>数据迁移</span>
        </el-menu-item>
        

      </el-menu>
    </el-scrollbar>

    <!-- 时间显示 -->
    <div class="sidebar-footer">
      <div class="datetime">
        <div class="date">{{ currentDate }}</div>
        <div class="time">{{ currentTime }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  ShoppingCart,
  Box,
  Document,
  TrendCharts,
  Setting,
  User,
  Ticket,
  Shop,
  Connection
} from '@element-plus/icons-vue'

const route = useRoute()

const activeMenu = computed(() => {
  const { meta, path } = route
  if (meta.activeMenu) {
    return meta.activeMenu
  }
  return path
})

const isCollapse = ref(false)

// 时间相关
const currentDate = ref('')
const currentTime = ref('')
let timer = null

const updateTime = () => {
  const now = new Date()
  currentDate.value = now.toLocaleDateString()
  currentTime.value = now.toLocaleTimeString()
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.logo-container {
  text-align: center;
  padding: 20px 0;
}

.logo-img {
  width: 50px;
  height: 50px;
}

.logo-title {
  color: #fff;
  font-size: 18px;
  margin-top: 10px;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.sidebar-footer {
  margin-top: auto;
  padding: 20px;
  text-align: center;
  color: #a7b1c2;
}

.datetime {
  font-family: 'Arial', sans-serif;
}

.date {
  font-size: 14px;
}

.time {
  font-size: 18px;
  font-weight: bold;
}
</style> 